import './index.scss'
/**
 * 创建新组件之后，在all-can-use-components中添加
 * 必须应用 microCreateMinis
 * 数据必须以formData包含
 * */
import '../../directive/index'
import { microCreateMinis } from '../../minis'
import { HandleDirective } from 'vue-slicksort'
import draggable from 'vuedraggable'
import { newGetMicroPageCompotentDetail } from '@/api/shoppingMall/feature'
import vueCharts from '@qiun/vue-ucharts'
import uchartsOpt from '@/utils/uchartsOpt.js'
import uchartsData from '@/utils/uchartsData.js'
import {snowflakeGenerator} from 'snowflake-id-js'
/** 图片广告*/

export default {
  name: 'micro-ucharts-single-box',
  mixins: [microCreateMinis],
  directives: { handle: HandleDirective },
  data() {
    return {
      isTagStyle:false,
      isGetChooseFeature: false, // 是否可以返回微页面
      isGetChooseChartStyle: false, // 是否可以返回微页面
      selectedCanvasId: '',
      selectedChartsIndex: 0,
      selectedChartsType: '',
      selectedChartsOpts: {},
      dialogChoosePages: false, // 自定义页面弹窗
      dialogChooseChartStyle: false, // 图表样式选择页面弹窗
      commonCheckFieldRules: 'checkData', // 当前组件默认的规则判断函数
      mySelfCheckRules: 'mySelfCheckFun', // 我自己的验证规则函数  比如弹窗之类的
      hotScale: 392 / 500,
      dialogHot: false, // 是否显示热区
      dialogChooseGoods: false, // 选择商品
      isGetChooseData: false, // 开始返会商品
      cacheImage: false, // 是否是正在编辑热区的
      /** 选择图片的弹窗*/
      dialogChooseImgVisible: false, // 显示选择图片
      isGetChooseImages: false, // 返回图片
      canChooseImagesNum: 1, // 可以添加的图片数量
      isChangeImg: false, // 是否为更换图片模式
      currentEditIndex: 0, // 当前编辑的图片
      currentHotEditIndex: 0, // 当前编辑的热区
      settingActive: 0,
      tabList: [{
          icon: 'el-icon-bank-card',
          title: '纵向平铺'
        },{
          icon: 'el-icon-bank-card',
          title: '横向平铺'
      }],
      showTime: [],
      formData: {
        indicator: 1, // 选择模板:
        cornerBorder: 0,
        imageMargin_a: 0,
        imageMargin_b: 0,
        pageMargin: 0,
        marginTop: 0,
        marginBottom: 0,
        intervalTime: 3000,
        indicatorStyle: 1,
        imageSize: 200,
        height: 500,
        showStartTime: '',
        showEndTime: '',
        chartsList: [],
        leftRange:0,
        topRange:65,
        tagHorn:0,
        txt_color: '#FFFFFF',
        bg_color: '#000000',
        labelWidth: 10,
        labelHeight: 10,
        labelRotation: 0,
        labelTransparency: 0.6
      },
      cacheImageActiveBox: [], // 缓存当前box list
      boxItem: { // 盒子模板
        link: '',
        type: '',
        title: '',
        left: 0,
        top: 0,
        translateX: 0,
        translateY: 0,
        width: 102,
        height: 102
      },
      commandInfo: {}, // 选择跳转的信息
      indicator_d_active: 1,
      delayload:false,
      loadingType: 2,
      lastIndex: 0
    }
  },
  watch: {
    showTime: {
      deep: true,
      handler(val) {
        this.formData.showStartTime = val[0]
        this.formData.showEndTime = val[1]
        console.log('val__',val)
      }
    }
  },
  components: {
    draggable,
    vueCharts,
    chooseGoods: () => import('@/components/choose-goods/index.vue'),
    chooseFeature: () => import('@/components/choose-feature/index.vue'),
    chooseChartsStyle: () => import('@/components/choose-charts-style/index.vue')
  },
  filters: {
    typeNameFilter(val) {
      let str = ''
      switch (val) {
        case 1:
          str = '商品详情页'
          break
        case 2:
          str = '购物车'
          break
        case 3:
          str = '个人中心'
          break
        case 4:
          str = '自定义页面'
          break
      }
      return str
    }
  },
  computed: {},
  mounted() {
  },
  methods: {
    // tabs 切换事件
    handleClick(el){
      if(el.index === '1'){
        var tag = this.formData.chartsList.find(item =>{
          return item.isTag
        })
        if(tag === undefined){
          this.isTagStyle = false
        }else{
          this.isTagStyle = true
        }
      }
    },
    choosePage(index) {
      console.log('index==', index)
      this.currentEditIndex = index
      this.dialogChoosePages = true
    },
    chooseChooseFeaturesFun($event) {
      const microTitle = $event.data.type === 0 && '系统页面' || $event.data.type === 1 && '功能页面' || $event.data.type === 2 && '商品详情'
      || $event.data.type === 3 && '商品活动'
      if ($event.data.type === 0) {
        this.setLinkInfo({
          id: $event.data.id,
          type: $event.data.type,
          title: $event.data.title,
          link: $event.data.path,
          microTitle: microTitle
        })
        console.log('$event.data', $event.data.type)
      } else if ($event.data.type === 3){
        if($event.data.channel[0] === 31){
          this.setLinkInfo({
            activityId: $event.data.id,
            channel: $event.data.channel[0],
            goodsId: '',
            type: $event.data.type,
            title: $event.data.title,
            link: $event.data.path,
            microTitle: microTitle
          })
        }else if($event.data.channel[0] === 32) {
          this.setLinkInfo({
            activityId: $event.data.id,
            channel: $event.data.channel[0],
            goodsId: '',
            type: $event.data.type,
            title: $event.data.title,
            link: $event.data.path,
            microTitle: microTitle
          })
        }else
        {
          this.setLinkInfo({
            activityId: $event.data.id,
            channel: $event.data.channel[0],
            goodsId: $event.data.campaignVO.goodsId,
            type: $event.data.type,
            title: $event.data.title,
            link: $event.data.path,
            microTitle: microTitle
          })
        }

      } else {
        this.setLinkInfo({
          id: $event.data.id,
          type: $event.data.type,
          title: $event.data.title,
          link: $event.data.id,
          microTitle: microTitle
        })
      }
      this.dialogChoosePages = false
    },
    chooseChartStyleFun($event) {
       this.dialogChooseChartStyle = false
       if($event.data) {
          var curChartsIndex = $event.chartsIndex
          this.formData.chartsList[curChartsIndex].uchatsOpts = $event.data
          if($event.data.loadingType) {
            this.formData.chartsList[curChartsIndex].loadingType = $event.data.loadingType 
          }
       }
    },
    resetBoderColor(type) {
      if (type === 1) {
        this.formData.txt_Color = '#000000'
      }else if (type === 2) {
        this.formData.bg_color = '#FFFFFF'
      }
    },
    addNewCharts(command){
      this.canChooseImagesNum = 10 - this.formData.chartsList.length
      this.isChangeImg = false
      const generator = snowflakeGenerator(512)
      let newId = generator.next().value;
       this.formData.chartsList.push({
         chartsType: command,
         canvasId: newId,
         uchatsOpts: JSON.parse(JSON.stringify(uchartsOpt[command])),
         uchatsData: JSON.parse(JSON.stringify(uchartsData[command])),
         loadingType: this.loadingType,
         title: '',
         link: '',
         type: '',
         isTag:false,
         style:1,
         activeBoxs: []
       })
    },
    setChartStyle(chartsType, canvasid, indicator, index) {
       const chartsId = canvasid + '-' + indicator
       this.selectedCanvasId = canvasid
       this.selectedChartsIndex = index
       this.selectedChartsType = chartsType
       this.selectedChartsOpts = this.formData.chartsList[index].uchatsOpts
       this.dialogChooseChartStyle = true
    },
    sweiperChange_a(val) {
      this.indicator_d_active = val + 1
    },
    /** 切换模板*/
    changeIndicator(index) {
      this.formData.indicator = index + 1
    },
    // 选择商品回调
    chooseGoodsFun($event) {
      // console.log('$event', $event)
      if ($event.data.length) {
        this.setLinkInfo({
          title: $event.data[0].name,
          link: $event.data[0].id
        })
      }
      this.dialogChooseGoods = false
    },
    /** 设置跳转信息*/
    setLinkInfo(obj) {
      // console.log('obj', obj)
      if (this.isCacheImage) { // 热区弹窗编辑模式
        this.cacheImageActiveBox[this.currentHotEditIndex].title = obj.title
        this.cacheImageActiveBox[this.currentHotEditIndex].link = obj.link
        this.cacheImageActiveBox[this.currentHotEditIndex].type = this.commandInfo.type
        this.$forceUpdate()
        return
      }
      if(obj.type !== 3){
        this.formData.chartsList[this.currentEditIndex].microTitle = obj.title
        this.formData.chartsList[this.currentEditIndex].link = obj.link
        this.formData.chartsList[this.currentEditIndex].type = obj.type
        this.formData.chartsList[this.currentEditIndex].microType = obj.microTitle
      }else{
        this.formData.chartsList[this.currentEditIndex].microTitle = obj.title
        this.formData.chartsList[this.currentEditIndex].link = obj.link
        this.formData.chartsList[this.currentEditIndex].type = obj.type
        this.formData.chartsList[this.currentEditIndex].microType = obj.microTitle
        this.formData.chartsList[this.currentEditIndex].activityId = obj.activityId
        this.formData.chartsList[this.currentEditIndex].goodsId = obj.goodsId
        this.formData.chartsList[this.currentEditIndex].channel = obj.channel
      }

      this.$forceUpdate()
      this.getDetail()
    },
    getDetail(){
      newGetMicroPageCompotentDetail({
        type:'image_ad',
        dataField:this.formData
      }).then(res =>{
        this.formData.chartsList = res.items
      })
    },
    /** 选择跳转路径*/
    command(eve) {
      this.isCacheImage = eve.isCacheImage || false
      this.commandInfo = eve.linkItem
      console.log('eve', eve)
      console.log('this.commandInfo', this.commandInfo)
      /* eslint-disable */
      if (eve.hasOwnProperty('currentHotEditIndex')) {
        this.currentHotEditIndex = eve.currentHotEditIndex
      }
      if (eve.hasOwnProperty('currentEditIndex')) {
        this.currentEditIndex = eve.currentEditIndex
      }
      /* eslint-enable */
      if (eve.linkItem.type === 1) {
        this.dialogChooseGoods = true
        return
      }
      if (eve.linkItem.type === 4) {
        this.dialogChoosePages = true
        return
      }
      console.log('this.currentEditIndex', this.currentEditIndex)
      this.setLinkInfo({
        title: this.commandInfo.title,
        link: this.commandInfo.link
      })
    },
    /* 校验*/
    checkData() {
      if (this.formData.chartsList.length) {
      }
      const isPass = (this.formData.chartsList.length > 0)
      this.myCheckResult(isPass)
      console.log('isPass_____',isPass)
    },
    // 弹出哪个没有填写的
    mySelfCheckFun() {
    console.log('caaca')

      if (this.formData.chartsList.length === 0) {
        this.$message.error('请添加图片！')
      }

    }
  }
}
